<template>
  <v-form v-model="valid" ref="myDriverForm">
    <v-text-field
      :disabled="!!isEdit"
      v-model="driver.driverCode"
      :counter="4"
      label="请输入司机编号"
      :rules="nameRules"
    />
    <v-text-field
      :disabled="!!isEdit"
      v-model="driver.driverName"
      label="请输入司机名称"
      required
      :rules="nameRules"
    />
    <v-text-field v-model="driver.phone" label="请输入司机手机号" :rules="nameRules" />
    <!--    <v-select  label='选择司机区域'/>-->
    <!-- <v-checkbox v-model="checkbox" :label="`启用`"></v-checkbox> -->
    <v-layout class="my-4" row>
      <v-spacer />
      <v-btn @click="submit" color="primary">提交</v-btn>
      <v-btn @click="clear">重置</v-btn>
    </v-layout>
  </v-form>
</template>

<script>
export default {
  name: "driver-form",
  props: {
    oldDriver: {
      type: Object
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      valid: false, // 表单校验结果标记
      driver: {
        name: "", // 司机名称
        phone: "", // 司机首字母
        code: "", // 司机logo
        status: 1
      },
      nameRules: [v => !!v || "内容不能为空"],
      checkbox: false
      // checkbox: this.driver.status ===0
      // letterRules: [
      // v => !!v || "首字母不能为空",
      // v => /^[a-zA-Z]{1}$/.test(v) || "司机字母只能是1个字母"
      // ]
    };
  },
  methods: {
    submit() {
      // 表单校验
      if (this.$refs.myDriverForm.validate()) {
        // 定义一个请求参数对象，通过解构表达式来获取brand中的属性
        const { ...params } = this.driver;
        const url = !this.isEdit
          ? "/item/logistics/insertdriver"
          : "/item/logistics/updatedriver";
        // params.status = this.checkbox ? 1 : 2;
        this.$http({
          method: "post",
          url: url,
          data: JSON.stringify(params),
          headers: {
            "Content-Type": "application/json;charset=UTF-8"
          }
        })
          .then(() => {
            // 关闭窗口
            this.$emit("close");
            this.$message.success("保存成功！");
          })
          .catch(() => {
            this.$message.error("保存失败！");
          });
      }
    },
    clear() {
      // 重置表单
      this.$refs.myDriverForm.reset();
    }
  },
  watch: {
    oldDriver: {
      // 监控oldDriver的变化
      handler(val) {
        if (val) {
          // 注意不要直接复制，否则这边的修改会影响到父组件的数据，copy属性即可
          this.driver = Object.deepCopy(val);
        } else {
          // 为空，初始化brand
          this.driver = {
            driverName: "",
            phone: "",
            driverCode: "",
            status: 0
          };
        }
      },
      deep: true
    }
  }
};
</script>

<style scoped>
</style>
